<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/prettify.css" />
		<style type="text/css">
			body {
				font-family: Helvetica, Arial, sans-serif;
				font-size: 13px;
				padding: 0 0 50px 0;
			}
			.contain {
				width: 800px;
				margin: 0 auto;
			}
			h1 {
				margin: 40px 0 20px 0;
			}
			h2 {
				font-size: 1.5em;
				padding-bottom: 3px;
				border-bottom: 1px solid #DDD;
				margin-top: 50px;
				margin-bottom: 25px;
			}
			table th:first-child {
				width: 150px;
			}
			/* Bootstrap 3.x re-reset */
			.fn-gantt *,
			.fn-gantt *:after,
			.fn-gantt *:before {
				-webkit-box-sizing: content-box;
				-moz-box-sizing: content-box;
                box-sizing: content-box;
			}
		</style>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.fn.gantt.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/prettify.js"></script>
	</head>
	<body>
		<div class="gantt"></div>
		<script type="text/javascript">
				$(function() {
					$(".gantt").gantt({
						source: [
							{
								id : '1',
								name: "喜欢",
								desc: "111",
								desc1: "aaa", // 存在的话 下面leftPanelWidth改成340px css/style.css   .fn-gantt .leftPanel { width: 340px; }
								values: [{
										from: "2014-08-07",
										to: "2014-08-17",
										desc :"悬停时出现的文本",
										label: "喜欢",
										customClass: "ganttRed",
										dataObj : {
											name: "喜欢",
											desc: "111",
											abc: "aaa",
										}
									}]
							}, 
							{
								id : '2',
								name: "订单",
								desc: "222",
								desc1: "bbb",
								values: [{
										from: "2014-08-08",
										to: "2014-08-15",
										desc :"悬停时出现的文本1",
										label: "订单",
										customClass: "ganttRed"
									}]
							}, 
							{
								id : '3',
								name: "晒单",
								desc: "333",
								desc1: "ccc",
								values: [{
										from: "2014-08-18",
										to: "2014-08-28",
										desc :"悬停时出现的文本2",
										label: "晒单",
										customClass: "ganttGreen"
									}]
							}, 
							{
								id : '4',
								name: "商品",
								desc: "444",
								desc1: "ddd",
								values: [{
										from: "2014-08-19",
										to: "2014-08-22",
										desc :"悬停时出现的文本3",
										label: "商品",
										customClass: "ganttBlue"
									}]
							}, 
							{
								id : '5',
								name: "微信支付",
								desc: "555",
								desc1: "eee",
								values: [{
										from: "2014-08-25",
										to: "2014-08-29",
										desc :"悬停时出现的文本4",
										label: "微信支付",
										customClass: "ganttGreen"
									}]
							}, 
							{
								id : '6',
								name: "消息推送",
								desc: "666",
								desc1: "fff",
								values: [{
										from: "2015-09-01",
										to: "2015-09-05",
										desc :"悬停时出现的文本5",
										label: "消息推送",
										customClass: "ganttBlue"
									}]
							}
						],
						leftPanelWidth : "340px", // 左边宽度
						navigate: "scroll",
						maxScale: "hours",// months  weeks days  hours
						itemsPerPage: 10,
						months : ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"] ,
						dow : ["日", "一", "二", "三", "四", "五", "六"] ,
						onItemClick: function(data) {
							console.log("有数据范围内点击事件",data)
						},
						onAddClick: function(dt, rowId) {
							console.log("无数据范围内点击事件",dt,rowId)
						},
						onRender: function() {
//							if (window.console && typeof console.log === "function") {
//								console.log("chart rendered");
//							}
						}
					});

					$(".gantt").popover({
						selector: ".bar",
						title: "我是弹窗",
						content: "我是弹窗的内容.",
						trigger: "hover"
					});

					prettyPrint();
				});

		</script>
	</body>
</html>
